<template>
	<cl-crud @load="onLoad" :on-refresh="onRefresh" ref="curd" :on-delete="rowDelete">
		<el-row type="flex">
			<cl-search-key placeholder="请输入层级名称" class="m-l-10" />
			<cl-flex1 />
		</el-row>
		<el-row>
			<cl-refresh-btn />
			<cl-add-btn class="m-r-10" />
		</el-row>
		<el-row class="table-order-warp">
			<cl-table v-bind="table" ref="table">
				<!-- 单个转移 -->
				<template #slot-add-btn="{ scope }">
					<el-button type="text" size="mini" v-if="scope.row.level<3" @click="onDeptUserAdd(scope.row)"
						>新增下级库房</el-button
					>
				</template>
</cl-table>
</el-row>

<el-row type="flex">
    <cl-flex1 />
    <!-- <cl-pagination /> -->
</el-row>

<cl-upsert v-model="form" v-bind="upsert"></cl-upsert>
</cl-crud>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                down: {
                    dateTime: []
                },
                dateTime: [],
                type: "",
                orderType: "",
                visible: false,
                visibleDown: false,
                barCode: "",
                form: {},
                upsert: {},
                table: {
                    on: {
                        "row-key": "id",
                        "tree-props": {
                            children: "children",
                            hasChildren: "hasChildren"
                        }
                    },
                    props: {
                        "row-key": "id"
                    },
                    columns: [{
                        prop: "name",
                        label: "库房",
                        align: "center",
                        "min-width": 150
                    }, {
                        label: "操作",
                        align: "center",
                        type: "op",
                        buttons: ["slot-add-btn", "edit", "delete"]
                    }]
                }
            };
        },

        methods: {
            // 部门下新增成员
            onDeptUserAdd(item) {
                this.$refs.table.crud.rowAppend({
                    pid: item.id,
                    pName: item.name
                });
            },
            rowDelete(selection, {
                next
            }) {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    next({
                        ids: selection.map(res => {
                            return res.id;
                        })
                    });
                });
            },
            init() {
                this.upsert = {
                    props: {
                        width: "800px"
                    },
                    items: [{
                        prop: "name",
                        label: "库房名称",
                        span: 12,
                        component: {
                            name: "el-input",
                            props: {
                                placeholder: "请填写库房名称"
                            }
                        },
                        rules: [{
                            required: true,
                            message: "库房名称不能为空"
                        }]
                    }, {
                        prop: "pName",
                        label: "上级库位",
                        span: 12,
                        component: {
                            name: "el-input",
                            props: {
                                placeholder: "一级",
                                disabled: "disabled"
                            }
                        }
                    }]
                };
            },
            async onRefresh(params, {
                next,
                render
            }) {
                this.init();
                let {
                    list
                } = await next({
                    ...params
                });
                render(list);
            },
            onLoad({
                app,
                ctx
            }) {
                ctx.service(this.$service.order).done();
                app.refresh();
            }
        }
    };
</script>

<style lang="scss">
    .m-l-10 {
        margin-left: 10px;
    }

    .m-r-10 {
        margin-right: 10px;
    }

    .sort-warp {
        height: 80vh;
    }

    .sure {
        float: right;
        margin-top: 10px;
    }
</style>